<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>模版语法</title>
  <!--  引入Vue-->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<!--
    Vue模版语法有2大类：
      1.插值语法：
        功能：用于解析标签体内容
        写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性
      2.指令语法：
        功能：用于解析标签（包括：标签属性、标签体内容、绑定事件....）
        举例：v-bind:href="xxx"  或 简写为 :href="xxx" ,xxx同样要写js表达式且可以直接读取到data中所有属性
        备注：Vue中有很多的指令，且形式都是:v-???,此处我们只是拿v-bind举个例子
-->

<!--准备好一个容器-->
<div id="root">
  <h1>插值语法</h1>
  <h3>你好，{{name}}</h3>
  <hr/>
  <h1>指令语法</h1>
  <!--v-bind  ——>  :（简写）   -->
  <a v-bind:href="url"  :x="hello">点我去学习</a>
  <a :href="url">点我去学习2</a>
</div>
</body>
<script type="text/javascript">
  Vue.config.productionTip=false//阻止vue在启动时产生生产提示
  new Vue({
    el:'#root',
    data:{
      name:'jack',
      url:'http://www.atguigu.com',
      hello:'你好'
    }
  })

</script>
</html>